<template>
	<view class="taskCenterPage">
		<u-navbar title="任务中心" @leftClick="goCustomNavBack" :titleStyle="titleStyle" bgColor="transparent"
			:autoBack="true" leftIconColor="#fff"></u-navbar>
		<view class="inviteBg">
			<u--image src="/static/vIntegral/1.png" shape="square" mode="aspectFill" width="100vw" height="35vh">
			</u--image>
		</view>
		<view style="height: 35vh;">
			<view class="integralInfo">
				<view class="integralTitle">当前V积分</view>
				<view class="integralAmount">{{integral}}</view>
			</view>
		</view>
		<view class="barTitle">做任务拿V积分</view>
		<view class="taskContent">
			<view v-for="(item,index) in taskList" :key="index" class="taskList" @click="doTask(item)">
				<view class="taskImage">
					<u--image src="/static/vIntegral/3.png" shape="square" mode="aspectFill" height="96rpx"
						width="88rpx">
					</u--image>
				</view>
				<view class="taskCenter">
					<view class="title">{{item.taskName}}</view>
					<view class="reward">{{item.remarks}}</view>
				</view>
				<view class="taskRight" :class="item.isComplete?'already':''" v-if="item.route || item.isComplete">
					{{item.isComplete?'已完成':'去完成'}}</view>
				<button class="taskRight" :class="item.isComplete?'already':''" v-else-if="!item.isComplete"
					open-type="share">{{item.isComplete?'已完成':'去完成'}}</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					color: "#ffffff"
				},
				userId: "",
				integral: 0,
				taskList: [],
				isLoad: false
			}
		},
		onShow() {
			if (this.isLoad) {
				this.$request.get(this.$api.userTask, {
					userId: this.userId,
					pageNo: 1,
					pageSize: 200
				}).then(result => {
					this.integral = result.result.integral;
					this.taskList = result.result.dcckTaskConfigurationVos;
					uni.hideLoading()
				})
			}
		},
		onLoad() {
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					let info = res.data;
					this.userId = info.id
					this.$request.get(this.$api.userTask, {
						userId: this.userId,
						pageNo: 1,
						pageSize: 200
					}).then(result => {
						this.integral = result.result.integral;
						this.taskList = result.result.dcckTaskConfigurationVos;
						this.isLoad = true
						uni.hideLoading()
					})
				},
			})
		},
		methods: {
			doTask(item) {
				if (item.route && !item.isComplete) {
					if (item.route == '/pages/discuss/discuss' || item.route =='/pages/community/community') {
						uni.switchTab({
							url: item.route
						})
					} else {
						uni.navigateTo({
							url: item.route
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.taskCenterPage {
		background: #f5f5f5;

		.inviteBg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.integralInfo {
			z-index: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 35vh;
			position: relative;
			padding-left: 40rpx;

			.integralTitle {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 28rpx;
				line-height: 80rpx;
			}

			.integralAmount {
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				font-size: 58rpx;
				line-height: 80rpx;
			}
		}

		.barTitle {
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			font-size: 40rpx;
			line-height: 40rpx;
			padding: 40rpx 34rpx;
		}

		.taskContent {
			padding: 0rpx 34rpx 40rpx;
			position: relative;

			.taskList {
				position: relative;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 20rpx;
				padding: 32rpx 24rpx;
				height: 100rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.taskImage {
					padding-right: 20rpx;
				}

				.taskCenter {
					.title {
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						font-size: 30rpx;
						line-height: 60rpx;
					}

					.reward {
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						font-size: 26rpx;
					}
				}

				.taskRight {
					position: absolute;
					right: 40rpx;
					border: 2rpx solid #247FFF;
					border-radius: 34rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #247FFF;
					font-size: 24rpx;
					height: 50rpx;
					width: 124rpx;
					line-height: 50rpx;
					text-align: center;
				}

				.already {
					color: #666666;
					border-color: #DEDEDE;
				}
			}

		}
	}
</style>
